<template>
  <div class="class_page">
    <van-search v-model="search" placeholder="请输入搜索关键词" @search="searchFtn" />
    <div class="page_count">
      <van-sidebar v-model="active">
        <van-sidebar-item title="所有分类" @click="cut(0)"/>
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in leftList"
          :key="index"
          @click="cut(item)"
        />
      </van-sidebar>
      <section>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/img/jingtian.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/tangyan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yifei.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yuanyuan.jpeg" alt="" />
          </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3" :border="false">
          <van-grid-item @click="$router.push(`/styleList/${item.id}`)"
            v-for="(item,index) in showList"
            :key="index"
            :icon="item.icon"
            :text="item.name"
          />
        </van-grid>
      </section>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs,watch } from "vue";
import { getAll } from "../../api/home/home";

export default {
  setup() {
    const data = reactive({
      classList: [], // 所有的数据
      leftList: [], // 左边的数据
      search: "", // 搜索绑定的值
      active: 0,
      showList:[], // 展示的数据
      // filterList:[], // 用于过滤的数据
    });
    getAll().then((res) => {
      // console.log(res);
      data.classList = res.data;
      data.leftList = res.data.filter((item) => item.level == 1);
      data.showList = res.data.filter((item) => item.level == 2);
      // data.filterList = res.data.filter((item) => item.level == 2);
    });

    // 第一个参数是要监听的数据，可以是一个ref值，还可以是一个函数（reactive）
    // 第二个参数回调函数
    // watch(()=>data.active,(newVal)=>{
    //     // console.log(newVal);
    //     // console.log(data.leftList);
    //     if (newVal == 0){
    //       data.showList = data.classList.filter((item) => item.level == 2);
    //     } else {
    //       let id = data.leftList[newVal - 1].id;
    //       data.showList = data.classList.filter((item) => item.pid == id);
    //     }
    // });


   const cut = (val) => { // 切换函数
      if(val == 0){
        data.showList = data.classList.filter((item) => item.level == 2);
        // data.filterList = data.classList.filter((item) => item.level == 2);
      } else {
        data.showList = data.classList.filter((item) => item.pid == val.id);
        // data.filterList = data.classList.filter((item) => item.pid == val.id);
      }
   }
   const searchFtn = () => { // 搜索
       data.showList = data.classList.filter(item => item.name.includes(data.search))
      //  data.showList = data.filterList.filter(item => item.name.includes(data.search))
   }

    return {
      ...toRefs(data),
      cut,
      searchFtn
    };
  },
};
</script>
<style lang="scss" scoped>
.class_page {
  .page_count {
    height: calc(100% - 108px);
    display: flex;
    width: 100%;
    section {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      .my-swipe {
        width: 80%;
        margin: 10px auto;
      }
      .van-swipe-item {
        border-radius: 10px;
      }
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
  }
}
</style>